<template>
  <div class="echartsBox" style="page-break-inside:avoid;">
    <ReportEcharts :option="option" :imgList="hrImg" :bigFontFlag="props.bigFontFlag" :id="id"/>
  </div>
</template>

<script setup lang="ts">
import {toRefs, watch} from 'vue'
import {reactive, getCurrentInstance, ref} from 'vue'
import {ReportEcharts} from "@/components/ReportEcharts";

interface heartType {
  reportData: any,
  bigFontFlag: boolean
}

const props = defineProps<heartType>()

const {proxy} = getCurrentInstance() as any
const echarts = proxy.$echarts

type EChartsOption = echarts.EChartsOption

interface DataType {
  hrImg: Array<object>
  option: EChartsOption
}

const data = reactive<DataType>({
  hrImg: [
    {
      url: 'maxHr.png',
      text: '最高脉率',
      value: '0次/分钟'
    },
    {
      url: 'lowHr.png',
      text: '最低脉率',
      value: '0次/分钟'
    },
    {
      url: 'avgHr.png',
      text: '平均脉率',
      value: '0次/分钟'
    }
  ],
  option: {
    grid: {
      left: '5%',
      right: '9%',
      bottom: '10%',
      top: '2%',
      containLabel: true
    },
    dataZoom: [
      {
        type: 'inside',
        realtime: true,
        start: 0,
        end: 100,
        show: false
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 150,
    },
    legend: {
      data: ['脉率'],
      left: 'center',
      top: 'bottom',
      icon: 'rect',
      itemHeight: 8,
      itemWidth: 8
    },
    series: [
      {
        name: '脉率',
        data: [],
        type: 'line',
        symbol: 'none', //不要折点
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(
            // 右/下/左/上四个方位，这里从下往上渐变
            0, 1, 0, 0,
            [{
              offset: 0,
              color: 'rgba(114, 46, 209, 0)'
            },
              {
                offset: 1,
                color: 'rgba(114, 46, 209, 0.2)'
              }]
          )
        },
        // //折线颜色
        // lineStyle: {
        //   color: 'rgba(114, 46, 209, 1)'
        // },
        //折点颜色
        itemStyle: {
          color: 'rgba(114, 46, 209, 1)'
        },
        markLine: {
          silent: true,
          data: [
            {
              yAxis: 60,
              symbol: 'none',
              label: {
                fontSize: '10px',
                color: 'rgba(252, 125, 2, 1)',
                formatter: '{c}次/分钟'
              },
              lineStyle: {
                color: 'rgba(252, 125, 2, 1)',
              },
            },
            {
              yAxis: 100,
              symbol: 'none',
              label: {
                fontSize: '10px',
                color: 'rgba(253, 1, 0, 1)',
                formatter: '{c}次/分钟'
              },
              lineStyle: {
                color: 'rgba(253, 1, 0, 1)',
              },
            },
          ]
        }
      }
    ],
    visualMap: {
      show: false,
      pieces: [
        {
          gte: 0,
          lt: 60,
          color: 'rgba(252, 125, 2, 1)'
        },
        {
          gte: 60,
          lte: 100,
          color: 'rgba(114, 46, 209, 1)'
        },
        {
          gt: 100,
          color: 'rgba(253, 1, 0, 1)'
        }
      ],
      outOfRange: {
        color: 'rgba(153, 153, 153, 1)'
      }
    },
  }
})
const {hrImg, option} = toRefs(data)
const id = ref(('hrEchatrs' + Math.random()).replace(".", ""));

const setData = (obj : any) => {
  //脉率
  const {abscissa, heartRateAxis, highestHeartRate, lowestHeartRate, avgHeartRate, lowWarnValue, highWarnValue} = obj || {}
  hrImg.value = [
    {
      url: 'maxHr.png',
      text: '最高脉率',
      value: (highestHeartRate ? highestHeartRate : '-') + "次/分钟",
    },
    {
      url: 'lowHr.png',
      text: '最低脉率',
      value: (lowestHeartRate ? lowestHeartRate : '-') + "次/分钟"
    },
    {
      url: 'avgHr.png',
      text: '平均脉率',
      value: (avgHeartRate ? avgHeartRate : '-') + "次/分钟"
    }
  ]
  option.value.xAxis.data = abscissa || []
  option.value.series[0].data = heartRateAxis || []
  option.value.xAxis.axisLabel = {
    interval: function (index: number) {
      let size = heartRateAxis.length;
      if (size <= 4) {
        return true;
      } else if (index == 0 ||
        index == Math.floor(size * 0.3333) ||
        index == Math.floor(size * 0.6666) ||
        index == size - 1) {
        return true;
      }
    }
  }
  option.value.series[0].markLine.data = [
    {
      yAxis: lowWarnValue || 60,
      symbol: 'none',
      label: {
        fontSize: '10px',
        color: 'rgba(252, 125, 2, 1)',
        formatter: '{c}次/分钟'
      },
      lineStyle: {
        color: 'rgba(252, 125, 2, 1)',
      },
    },
    {
      yAxis: highWarnValue || 100,
      symbol: 'none',
      label: {
        fontSize: '10px',
        color: 'rgba(253, 1, 0, 1)',
        formatter: '{c}次/分钟'
      },
      lineStyle: {
        color: 'rgba(253, 1, 0, 1)',
      },
    },
  ];

  option.value.visualMap = {
    show: false,
    pieces: [
      {
        gte: 0,
        lt: lowWarnValue || 60,
        color: 'rgba(252, 125, 2, 1)'
      },
      {
        gte: lowWarnValue || 60,
        lte: highWarnValue || 100,
        color: 'rgba(114, 46, 209, 1)'
      },
      {
        gt: highWarnValue || 100,
        color: 'rgba(253, 1, 0, 1)'
      }
    ],
    outOfRange: {
      color: 'rgba(153, 153, 153, 1)'
    }
  }
}

if (props.bigFontFlag) {
  setData(props.reportData);
}
//监听reportData变化
watch(
  () => props.reportData,
  (newValue) => {
    setData(newValue);
  },
  {
    deep: true
  }
)
</script>

<style scoped lang="less"></style>
